// import Taro from '@tarojs/taro'
import { useState } from 'react'
import { View, Input, Textarea, Text, Picker } from '@tarojs/components'
import { AtButton, AtIcon } from 'taro-ui'

import './index.scss'

const Activity = () => {
  const [citys, setCitys] = useState(['美国', '中国', '巴西', '日本'])
  const [selectedCity, setSelectedCity] = useState('')

  const onChange = e => {
    setSelectedCity(citys[e.detail.value])
  }

  return (
    <View className='spaceEntry'>
      <View className='form-list'>
        <View className='form-item'>
          <Input className='input' type='text' placeholder='空间名字' />
        </View>
        <View className='form-item'>
          <Input className='input' type='text' placeholder='负责人名字' />
        </View>
        <View className='form-item'>
          <Input className='input' type='text' placeholder='联系电话' />
        </View>
        <View className='form-item'>
          <Picker mode='selector' range={citys} onChange={onChange}>
            <View className='input picker'>
              {selectedCity ? selectedCity : <Text style='color: #666;'>选择城市</Text>}
            </View>
          </Picker>
        </View>
        <View className='form-item'>
          <Textarea className='textarea' placeholder='具体地址' />
        </View>
      </View>
      
      <AtButton type='primary'>提交进驻申请</AtButton>

      <View className='consult-wrap'>
        <View className='tip'>了解更多，请拨打咨询电话</View>
        <View className='consult-phone'>
          <AtIcon value='phone' size='30' />
          <Text>1231****144</Text>
        </View>
      </View>
    </View>
  )
}

export default Activity
